<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务列表</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<!-- 任务列表页面 -->
<div id="task-list-page" class="container mx-auto p-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-700">任务列表</h1>
        <button id="add-task-btn"
                class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
            添加任务
        </button>
    </div>
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成进度</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">开始时间</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">结束时间</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody id="task-list" class="bg-white divide-y divide-gray-200">
            <!-- 动态插入任务列表项 -->
            </tbody>
        </table>
    </div>
</div>

<!-- 创建任务弹窗 -->
<div id="create-task-modal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg max-w-lg w-full">
        <h2 class="text-2xl font-bold text-gray-700 text-center mb-6">创建任务</h2>
        <form id="create-task-form">
            <div class="mb-4">
                <label for="task-name" class="block text-gray-700 font-medium mb-2">任务名称</label>
                <input type="text" id="task-name" name="task-name"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                       required>
            </div>
            <div class="mb-4">
                <label for="task-desc" class="block text-gray-700 font-medium mb-2">任务描述</label>
                <textarea id="task-desc" name="task-desc" rows="4"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="mb-4">
                <label for="file-location" class="block text-gray-700 font-medium mb-2">文件位置</label>
                <input type="text" id="file-location" name="file-location"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="flex justify-between items-center">
                <button type="submit"
                        class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    创建任务
                </button>
                <button type="button" id="close-modal"
                        class="bg-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-400 focus:outline-none">取消
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#add-task-btn').click(function () {
            $('#create-task-modal').removeClass('hidden');
        });

        $('#close-modal').click(function () {
            $('#create-task-modal').addClass('hidden');
        });

        $('#create-task-form').submit(function (e) {
            e.preventDefault();
            const taskName = $('#task-name').val();
            const taskDesc = $('#task-desc').val();
            const fileLocation = $('#file-location').val();
            const currentTime = new Date().toLocaleString();
            const progress = '0%';
            const startTime = '-'; // 默认值
            const endTime = '-';   // 默认值
            const status = '未开始';

            const listItem = `
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${taskName}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${status}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${currentTime}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${progress}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${startTime}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${endTime}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${taskDesc}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button class="text-red-600 hover:text-red-900 mr-2 delete-task">删除</button>
                            <button class="text-blue-600 hover:text-blue-900 download-task">下载</button>
                        </td>
                    </tr>
                `;

            $('#task-list').append(listItem);

            // 清空表单
            $('#create-task-form')[0].reset();

            // 关闭弹窗
            $('#create-task-modal').addClass('hidden');
        });

        // 删除任务
        $(document).on('click', '.delete-task', function () {
            $(this).closest('tr').remove();
        });
    });
</script>
</body>
</html>
